CSS for Mobile Browsers : Common Patterns (part 1) - Absolute and floating positions

Display Properties

The most standard display values (none, block, inline) are supported, but in a limited way. If you change the value dynamically via JavaScript, many browsers will not render the change.

There are also other table and column values that I do not recommend using in mobile websites: inline-table, table-column, table-cell, and others. They are not common in desktop websites either, because of Internet Explorer’s lack of compatibility.

And, to be perfectly honest, why should we need column or table layouts on the mobile web? If we do want to show tabular data, we should create the tables in HTML, not use the table layout CSS features.

Note:

Even when we’re designing for some new smartphones, like the Nokia N900, which has a screen width of 800 pixels, we should avoid using tables and column layouts with more than two columns. Even at 800 pixels, the screen is still small, and we need to remember that it is a mobile device and think about the contexts in which it will be used.

The style display: none will be used a lot in JavaScript and Ajax development. In the next chapter, we will test browser compatibility for this property dynamically.

1. Absolute and floating positions

The standard position (position: static) is the most widely compatible and is recommended for mobile websites. This means that each element will be rendered in its normal position in the document.

Floating elements do work very well on most mobile devices, as you’ll see in Table 1. However, even on devices with average-sized screens it’s best not to have more than two floating elements in the same row. This can be approached using float: left and float: right.

Relative positioning (position: relative) is trickier in mobile browsers. It defines movement (using top, bottom, right, left) from the original position as a static element.

A clear element (clear: both, for example) can be used after floating elements to ensure that no floating elements are allowed on the right, the left, or both sides of the element.

Note:

There is a JavaScript solution for creating a floating footer called iScroll. You can find it at http://www.mobilexweb.com/iscroll. The main problem with using this kind of JavaScript solution is that it impacts the performance of our websites.

Fixed positioning is not compatible with all mobile browsers (see Table 1) and is not recommended. The problem is that in mobile browsers we are scrolling a window, not the contents. Depending on the zoom and the viewport size, a fixed position can have different meanings.

Note:

There is a campaign on the Web that aims to reduce this problem in the future. You can read more about it at http://www.abettermobileweb.com; this site explains the problem of fixed positioning and how to solve it in the future.

Richard Herrera (http://www.doctyper.com) has also created some JavaScript and CSS-based solutions for the iPhone and other WebKit-based browsers to emulate some kind of fixed positioning.

Scrolling and focus navigation can give us problems with absolute positions. The z-index can also give us problems on low- and mid-end devices.

According to the WAP CSS standard, the position and z-index properties are optional, so whether they are supported or not is up to each browser.